<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>会员中心</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="./../css/comm.css" rel="stylesheet">
    <link href="./../css/members.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- begin header -->
    <header>
        <nav class="navbar navbar-default" >
          <ul class="nav nav-tabs nav-justified top-nav" style="width: 90%;margin: 0 auto">
            <li>
              <h2>LOGO/**处方平台</h2>
            </li>
            <li>
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="输入会员姓名/手机号/身份证号">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i>查找</span>
                </div>
            </li>
            <li><p>2018年8月20号   星期一</p></li>
          </ul>
        </nav>
    </header>
    <!-- end header -->
    <!-- begin content -->
      <div class="content">
          <div class="panel panel-default table-responsive">
            <table class="table members-table">
            </table>
          </div>
					<!-- 模态框 -->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
							<div class="modal-dialog" role="document">
									<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
												<h4 class="modal-title" id="myModalLabel"></h4>
											</div>
											<!-- modal-body -->
											<div class="modal-body"></div>
											<!-- modal-body -->
											<div class="modal-footer"></div>
									</div>
							</div>
					</div>
      </div>
      <!-- end content -->
      <!-- 添加会员 -->
      <div class="add-members" onclick="window.location.href='addMember.html'">
        <p>添加会员</p>
      </div>
      <footer>
          <nav class="navbar navbar-default" >
          <ul class="nav nav-tabs nav-justified">
            <li>
              在线问诊
            </li>
            <li>
              在线审方
            </li>
            <li>
              含麻登记
            </li>
            <li class="active">
              会员中心
            </li>
            <li>
              设置
            </li>
          </ul>
        </nav>
      </footer>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../js/jquery.min.js"></script>
    <script src="../asset/js/bootstrap.min.js"></script>
		<script src="../asset/js/bootstrap-table.min.js"></script>
		<script src="../js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var myData=[];
			$('.members-table').bootstrapTable({
						method : 'get', // 服务器数据的请求方式 get or post
						url :defaultUrl+"/storeAssociator/queryMember", // 服务器数据的加载地址
						iconSize : 'outline',
						toolbar : '#exampleToolbar',
						striped: false, // 设置为true会有隔行变色效果
						dataType : "json", // 服务器返回的数据类型
						pagination : true, // 设置为true会在底部显示分页条
						singleSelect : false, // 设置为true将禁止多选
						pageSize : 10, // 如果设置了分页，每页数据条数
						pageNumber : 1, // 如果设置了分布，首页页码
						// search : true, // 是否显示搜索框
						showColumns : false, // 是否显示内容下拉框（选择显示的列）
						sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
						contentType: "application/x-www-form-urlencoded",//请求数据内容格式 默认是 application/json 自己根据格式自行服务端处理
						queryParams :function(params) {
							return {
								limit : params.limit,
								offset : params.offset
							};
						},
						columns :[
								{
									checkbox : true,
									width:'3%'
								},
								{
										field: 'associatorId',
										title: "序号",								
										width:'5%'
								},
								{
								    field: 'attachmentUrl',
								    title: "头像",
										formatter : function(value, row, index) {
											var e = '<img src="'+ row.attachmentUrl+'" style="width:50px;height:50px;border-radius:50%;display:block;margin:0 auto"/> ';
											return e;
										},
										width:'10%'
								},
								{
								    field: 'associatorName',
								    title: "用户名",								
								    width:'15%'
								},
								{
										field: 'sex',
										title: "性别",
										formatter : function(value, row, index) {
											if(row.sex==0){
												return '女';
											}else if(row.sex==1){
												return '男';
											}
										},
										width:'10%'
								},
								{
										field: 'age',
										title: "年龄",
										width:'10%'
								},
								{
								    field: "phone",
								    title: "电话",
								    width:'10%'
								},
								{
										field: "personId",
										title: "身份证",
										width:'10%'
								},
								{
									title:'操作',
									width:'15%',
									formatter :actionFormatter
								}	
								],
								onLoadSuccess: function (data) {
									myData=data.rows;
                },
								formatNoMatches: function(){
							        return "没有相关的匹配结果";
							    },
							  formatLoadingMessage: function(){
							      return "请稍等，正在加载中。。。";
							  }
					});
					function reLoad() {
						$('.members-table').bootstrapTable('refresh');
					}
					/* 删除会员 */
					function del(id) {
						$('#myModal').modal('show');
						$('#myModalLabel').html('<span class="glyphicon glyphicon-question-sign" style="font-size:22px;font-weight:bold;color:\'gold\'"></span>提示');
						var formHTML='确认要删除该行数据？';
						$('.modal-body').html(formHTML);
						var footHTML='<button type="button" class="btn btn-default" data-dismiss="modal" onclick=\"delBtnFunction(cannle)\">取消</button>'+
												 '<button type="button" class="btn btn-primary" onclick="delBtnFunction(\'ok\',' + id + ')">确认</button>';
						$('.modal-footer').html(footHTML);
					}
					function delBtnFunction(state,id){
						switch(state){
							case 'cannle':
							alert('you take cannle');
							break;
							case 'ok':
							$('#myModal').modal('hide');
							$.asyncAx(
												'/storeAssociator/deleteAssociator',
												{
													associatorId:id
												},
												null,
												null,
												null,
												function(data){
														if(data.res==1){
															alert(data.resMsg);
															reLoad()
														}
												},
												function(){
														console.log('失败')
												}
											);
							break;
						}
					}
					/* 确认修改 */
					function editBtnFunction(id){
						var formData=$('.person-form').serialize();
						var imgUrl=$('.edit-head-img img').attr('src');
							$.asyncAx(
												'/storeAssociator/updateBaseAssociator',
												formData,
												null,
												null,
												null,
												function(data){
														if(data.res==1){
															alert(data.resMsg);
															reLoad()
														}
												},
												function(){
														console.log('失败')
												}
											);
					}
					function actionFormatter(value, row, index) {
            var id = row.associatorId;
            var result = "";
						result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"viewById('" + id + "')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>";
            result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"edit('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
            result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"del('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

            return result;
        }
					/*修改会员*/
					function edit(row) {
						var curData;
						for (var i=0;i<myData.length;i++) {
							if(myData[i].associatorId==parseInt(row)){
								curData=myData[i];
								console.log(curData)
							}
						}
						$('#myModal').modal('show');
						$('#myModalLabel').html('修改会员');
						var formHTML='<form class="person-form">'+
															'<input type="text" name="associatorId" value='+curData.associatorId+' style="display:none">'+
															'<div class="edit-head-img">'+
																'<img src="'+curData.attachmentUrl+'" alt="头像" name="attachmentUrl">'+
															'</div>'+
																'<div class="form-group">'+
																	'<label for="inputName" class="col-sm-2 control-label">姓名</label>'+
																	'<div class="col-sm-10">'+
																		'<div class="row">'+
																			'<div class="col-sm-6">'+
																				'<div class="form-group">'+
																					'<div class="col-sm-10">'+
																						'<input type="text" class="form-control" id="inputName" name="associatorName" placeholder="请输入姓名" value='+curData.associatorName+'>'+
																					'</div>'+
																				'</div>'+
																			'</div>'+
																			'<div class="col-sm-6">'+
																				'<div class="form-group">'+
																					'<label class="col-sm-2 control-label">性别</label>'+
																					'<div class="col-sm-10">'+
																						'<select class="form-control" name="sex">'+
																						'<option>男</option>'+
																						'<option>女</option> '+
																						'</select>'+
																					'</div>'+
																				'</div>'+
																			'</div>'+
																		'</div>'+
																	'</div>'+
																'</div>'+
																'<div class="form-group">'+
																	'<label class="col-sm-2 control-label" for="inputPhone">电话</label>'+
																	'<div class="col-sm-10">'+
																		'<div class="row">'+
																			'<div class="col-sm-6">'+
																				'<div class="form-group">'+
																					'<div class="col-sm-10">'+
																						'<input type="text" class="form-control" placeholder="请输入电话号码" id="inputPhone" name="phone" value='+curData.phone+'>'+ 
																					'</div>'+
																				'</div>'+
																			'</div>'+
																			'<div class="col-sm-6">'+
																				'<div class="form-group">'+
																					'<label for="inputID" class="col-sm-2 control-label">身份证</label>'+
																					'<div class="col-sm-10">'+
																						'<input type="text" class="form-control" id="inputID" placeholder="请输入身份证号码" name="personId" value='+curData.personId+'>'+
																					'</div>'+
																				'</div>'+
																			'</div>'+
																		'</div>'+
																	'</div>'+
																'</div>'+
																'<div class="form-group">'+
																	'<label for="inputAddr" class="col-sm-2 control-label">地址</label>'+
																	'<div class="col-sm-10">'+
																		'<input type="text" class="form-control" id="inputAddr" placeholder="请输入地址" name="address" value='+curData.address+'>'+
																	'</div>'+
																'</div>'+
																'<div class="form-group">'+
																	'<label for="inputOther" class="col-sm-2 control-label">备注</label>'+
																	'<div class="col-sm-10">'+
																		'<input type="text" class="form-control" id="inputOther" placeholder="请输入备注" name="remarks" value='+curData.remarks	+'>'+
																	'</div>'+
																'</div>'+
											'</div>';
						$('.modal-body').html(formHTML);
						var footHTML='<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>'+
												 '<button type="button" class="btn btn-primary" onclick="editBtnFunction('+curData.associatorId+')">确认</button>';
						$('.modal-footer').html(footHTML);
					}
					/* 查看会员资料详情 */
					function viewById(id){
						window.location.href='memberDate.html?prescriptionId='+id;
					}
		</script>
  </body>
</html>